<template>
	<view v-if="banners.length > 0" style="margin-top: 10px;">
		<view class="container">

			<!-- 轮播图 -->
			<view class="banner-wrap" style="width: 100%;">
				<swiper class="banner-swiper" style="width: 100%;" :current="bannerIndex" :autoplay="autoplay" indicator-dots circular
					vertical @change="bannerChange">
					<swiper-item class="swiper-item" v-for="(item, index) in banners" :key="index">
						<navigator v-if="item.linkMode == 0" :url="`/pages/goods/index?id=${item.goodsId}`">
							<image class="cover" :src="item.pictureUrl"></image>
						</navigator>
						<a v-else :href="item.linkUrl" target="_blank">
							<image class="cover" :src="item.pictureUrl"></image>
						</a>
					</swiper-item>
				</swiper>
				<!-- 左右切换箭头 -->
				<view class="btn " @click="switchBanner(false)">
					<i class="icon i-left"></i>
				</view>
				<view class="btn btn-right" @click="switchBanner(true)">
					<i class="icon i-right"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [],
				bannerIndex: 0,
				categories: [],
				categoryIndex: -1,
				autoplay: true,
				user: [],
			}
		},
		computed: {
		},
		created() {
			this.findBanners();
			this.findCategories();
			this.findUser();
		},
		methods: {
			setCategory(item) {
				this.categoryIndex = item.id
			},
			findUser() {
				this.$util.request('/api/v1/user?page=0&type=2', {}, (res) => {
					console.log(res)
					this.user = res.data;
				}, true);
			},
			findBanners() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				// this.$util.request('/banner/slides', {}, (res) => {
				// 	uni.hideLoading();
				// 	this.banners = res;
				// }, true);
				this.banners.push({
					pictureUrl: '/static/image/home/banner.png'
				})
			},
			findCategories() {
				this.$util.request('/api/v1/category/all', {}, (res) => {
					console.log(res)
					this.categories = res.data;
					this.categories.unshift({
						id: -1,
						name: '全部'
					})
				}, true);
			},
			bannerChange(e) {
				this.bannerIndex = e.detail.current;
			},
			switchBanner(toNext) {
				this.autoplay = false;

				if (toNext) {
					if (this.bannerIndex < this.banners.length - 1) {
						this.bannerIndex++;
					} else {
						this.bannerIndex = 0;
					}
				} else {
					if (this.bannerIndex == 0) {
						this.bannerIndex = this.banners.length - 1;
					} else {
						this.bannerIndex--;
					}
				}

				setTimeout(() => {
					this.autoplay = true;
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	.imgbg {
		border: 1px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to right, #222, #222), linear-gradient(270deg, #0033ff, #d000ff);
	}

	// .bgHead {
	// 		padding: 2rpx;
	// 		border-radius: 68px;
	// 		box-sizing: border-box;
	// 		background: linear-gradient(90deg, #0033FF 0%, #D000FF 100%);
	// }
	// .bgWhiteCircle {
	// 		padding: 5rpx;
	// 		background-color: white;
	// 		border-radius: 62px;
	// }
	.active {
		color: #fff;
		background: linear-gradient(270deg, #0033FF 0%, rgba(0, 51, 255, 0.9786) 0%, rgba(110, 24, 255, 0.9899) 43%, #D000FF 83%) !important;

		opacity: 1;
	}

	.fl {
		margin-left: 10px;
		padding: 3px 15px 3px 15px;
		background: #E4E4E4;
		border-radius: 25px 25px 25px 25px;
		opacity: 1;
	}

	.container {
		width: $page-width;
		margin: 0 auto;
		position: relative;

		.banner-wrap {
			position: relative;
			width: 100%;
			/deep/ .uni-swiper-wrapper .uni-swiper-dots {
				right: 20px;
				left: auto;
				top: 92%;
				display: flex;
				transform: translateY(0);

				.uni-swiper-dot {
					width: 6px;
					height: 6px;
					margin: 0 5px;
					border: 2px solid;
					border-color: hsla(0, 0%, 100%, .3);
					border-radius: 10px;
					background: rgba(0, 0, 0, .4);

					&.uni-swiper-dot-active {
						background: hsla(0, 0%, 100%, .4);
						border-color: rgba(0, 0, 0, .4);
					}
				}
			}

			&,
			.banner-swiper,
			.cover {
				width: 100%;
				height: 360px;
			}

			.btn {
				position: absolute;
				top: 50%;
				width: 41px;
				height: 69px;
				transform: translateY(-50%);
				cursor: pointer;
				border-radius: 2px;
				@extend %flex-align-center;
				justify-content: center;

				&:hover {
					background-color: rgba(0, 0, 0, .6);
				}

				.icon {
					font-size: 30px;
					color: $border-color;
				}

				&.btn-left {
					left: 234px;
				}

				&.btn-right {
					right: 0;
				}
			}
		}

		.category-wrap {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			display: flex;

			.category-panel {
				width: 234px;
				padding: 20px 0;
				background-color: rgba(0, 0, 0, .4);

				.category {
					@extend %flex-align-center;
					justify-content: space-between;
					padding-left: 30px;
					padding-right: 20px;
					height: 42px;
					line-height: 42px;
					cursor: pointer;

					// &:hover,
					// &.active {
					// 	background-color: $color-primary;
					// }

					.name {
						color: #FFFFFF;
					}

					.icon {
						color: #FFFFFF;
						margin-top: 3px;
					}
				}
			}

			.goods-panel {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				background-color: $bg-color;
				border: 1px solid $border-color;
				box-shadow: 0 8px 16px rgba(0, 0, 0, .18);

				.goods {
					@extend %flex-align-center;
					padding: 18px 20px;

					.thumb {
						width: 40px;
						height: 40px;
						margin-right: 12px;
					}

					.name {
						max-width: 150px;
						line-height: 40px;
						color: $text-color;
						cursor: pointer;

						&:hover {
							color: $color-primary;
						}
					}
				}
			}
		}
	}
</style>